<template>
  <view :class="[`${prefixCls}-login-account`]">
    <uv-form ref="uvForm" labelPosition="left" :model="formData" :rules="rules" labelWidth="80px" :errorType="errorType">
      <uv-form-item label="账号：" prop="account" borderBottom>
        <uv-input v-model="formData.account" type="number" maxlength="11" border="none" placeholder="请输入手机号" />
      </uv-form-item>

      <uv-form-item label="密码：" prop="password" borderBottom>
        <uv-input v-model="formData.password" type="password" maxlength="32" border="none" placeholder="请输入密码" />
      </uv-form-item>
      <cu-agreements v-model="formData.agreement" scope="login" />
      <uv-button type="primary" class="login-button" @click="onSubmit">登 录</uv-button>
    </uv-form>

    <view class="login-operate">
      <text class="nvtext info" @click="switchAuthType(AuthTypeEnum.FORGOTPWD.type)">{{ AuthTypeEnum.FORGOTPWD.name }}</text>
      <text class="nvtext primary" @click="switchAuthType(AuthTypeEnum.MOBILE.type)">{{ AuthTypeEnum.MOBILE.name }}</text>
    </view>
  </view>
</template>

<script>
import { AuthTypeEnum } from '@/common/enums/userEnum'
import FormValidate from '@/common/validate/form'
import { mapActions, mapGetters } from 'vuex'

const rules = {
  account: FormValidate.account,
  password: FormValidate.password,
}
/**
 * props
 * @description
 * @property {Object} errorType 自定义样式
 * @property {String} errorType: message:输入框下方 | toast:弹出 | border-bottom: 作用域底部的下划线显示为红色 | none:不会进行任何提示
 */
export default {
  name: 'cuLoginAccount',
  mixins: [],
  props: {
    errorType: {
      type: [String],
      default: 'toast',
    },
  },
  data() {
    return {
      AuthTypeEnum,
      rules,
      formData: {
        account: '',
        password: '',
        agreement: false,
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('modal', ['SetAuthType']),
    onSubmit() {
      this.$refs.uvForm
        .validate()
        .then((res) => {})
        .catch((errors) => {})
    },

    //
    switchAuthType(e) {
      this.SetAuthType(e)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('login-account')} {
  position: relative;
  padding: 80rpx 30rpx;
  .login-button {
    margin-top: 60rpx;
  }
  .login-operate {
    @include flex;
    justify-content: space-between;
    margin-top: 20rpx;
    .nvtext {
      font-size: 28rpx;
    }
    .info {
      color: $uv-info;
    }
    .primary {
      color: $uv-primary;
    }
  }
}
</style>
